<template>
  <div class="wrap">
    <van-cell v-for="(item, index) in list" :key="index">
      <div slot="icon">
        <van-image
          width="35"
          height="35"
          round
          fit="cover"
          :src="item.aut_photo"
          style="margin-right: 10px"
        />
      </div>
      <div slot="title">
        <div class="aut">
          <span>{{ item.aut_name }}</span>
          <div>
            <van-icon
              :name="item.is_liking ? 'good-job' : 'good-job-o'"
              :color="item.is_liking ? 'yellow' : ''"
              @click="onLike(item)"
            />
            <span style="padding-left:6px">{{ item.like_count }}</span>
          </div>
        </div>
        <div>{{ item.content }}</div>
      </div>
      <div slot="label" class="spanText">
        <div style="padding-right: 15px">
          {{ item.pubdate | dateTime("MM-DD HH-ss-mm") }}
        </div>
        <van-button
          round
          style="
            width: 75px;
            height: 23px;
            font-size: 12px;
            background-color: rgb(244, 245, 246);
          "
          @click="$emit('handleIsReply',item)"
          >{{ item.reply_count }} 回复</van-button
        >
      </div>
    </van-cell>
  </div>
</template>
<script>
import {
  addCommentLikings,
  deleteCommentLikings
} from '../../../api/following'
export default {
  name: 'ArticleItem',
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  methods: {
    async onLike (value) {
      this.$toast.loading({
        message: '操作中...',
        forbidClick: true // 禁止背景点击
      })
      if (value.is_liking) {
        // 是true  取消点赞
        await deleteCommentLikings(value.com_id)
        value.like_count--
        this.$toast.success('取消点赞')
      } else {
        // 点赞
        await addCommentLikings(value.com_id)
        value.like_count++
        this.$toast.success('点赞成功')
      }
      value.is_liking = !value.is_liking
    }
  }
}
</script>
<style scoped lang='less'>
.spanText {
  display: flex;
  align-items: center;
}
.aut {
  display: flex;
  justify-content: space-between;
}
</style>
